<template>
    <view class="performance">
        <uni-nav-bar fixed left-icon="left" title="业绩完成度" @clickLeft="backHandle" @clickRight="openHandle" class="unibarS">
            <view class="input-view">
                <u-tabs :list="list1" :current="current" @click="clickTabs"></u-tabs>
            </view>
            <block slot="right">
                <svg-icon svgPath="/static/svg/icon-shaixuan.svg" color="#0C1019" size="18px" />
			</block>
        </uni-nav-bar>

        <!-- 数据统计 柱状图 -->
        <view style="background-color: rgba(255, 255, 255, 1);">
            <view class="title">数据统计</view>
            <l-echart ref="chartColumnar"></l-echart>
        </view>
        <!-- 金额汇总 -->
        <view class="money-summary">
            <view>
                <view class="label">目标金额</view>
                <view class="num">￥{{ yearTotal.annualTarget }}</view>
            </view>
            <view>
                <view class="label">成交金额</view>
                <view class="num">￥{{ yearTotal.totalAmount }}</view>
            </view>
            <view>
                <view class="label">完成率</view>
                <view class="num">{{ yearTotal.conversionRate }}%</view>
            </view>
        </view>
        <!-- 表格 -->
        <view>
            <uni-table ref="table"  emptyText="暂无更多数据">
                <uni-tr>
                    <uni-th width="70" align="center">排名</uni-th>
                    <uni-th v-if="personageData.performanceType == 2" width="80" align="center">名称</uni-th>
                    <uni-th v-if="personageData.performanceType == 2" width="80" align="center">所在部门</uni-th>
                    <uni-th v-if="personageData.performanceType == 1" width="80" align="center">部门名称</uni-th>
                    <uni-th width="100" align="center">目标金额</uni-th>
                    <uni-th width="100" align="center">成交金额</uni-th>
                    <uni-th width="100" align="center">完成率</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td align="center">{{ item.ranking }}</uni-td>
                    <uni-td v-if="personageData.performanceType == 2" align="center">{{ item.userName }}</uni-td>
                    <uni-td v-if="personageData.performanceType == 2" align="center">{{ item.deptName }}</uni-td>
                    <uni-td v-if="personageData.performanceType == 1" align="center">{{ item.deptName }}</uni-td>
                    <uni-td align="center">{{ item.annualTarget }}</uni-td>
                    <uni-td align="center">{{ item.totalAmount }}</uni-td>
                    <uni-td align="center">{{ item.conversionRate }}</uni-td>
                </uni-tr>
            </uni-table>
            <view class="pagination">
                <view class="pagination-box">
                    <uni-pagination :total="total" @change="changePageHandle" title="标题文字" prev-text="前一页"
                        next-text="后一页" />
                </view>
            </view>
        </view>
        <uni-popup style="width: 100%;" ref="popup" type="right" border-radius="10px 10px 0 0">
            <view class="drawer-box">
                <view class="drawer-content">
                    <u--form labelPosition="top" ref="uForm" labelWidth="100">
                        <u-form-item label="类型" border
                            ref="item1">
                            <view class="drawer-classify">
                                <view v-for="(item, index) in bs_performance_targettype" :key="index" @click="changeTime(item.dictValue)" :class="{ active: statisticsQuery.targetType == item.dictValue }">{{ item.dictLabel }}</view>
                            </view>
                        </u-form-item>
                        <u-form-item class="search-item-box" label="时间" border ref="item1">
                            <view style="width: 100%;">
                                <picker mode="date" fields="year" :value="selectedYear" @change="bindDateChange">
                                    <view v-if="statisticsQuery.financialYear" style="width: 100%;">{{ statisticsQuery.financialYear }}年</view>
                                    <view v-else>请选择年份</view>
                                </picker>
                            </view>
                            <u-icon slot="right" name="clock"></u-icon>
                        </u-form-item>
                    </u--form>
                </view>
                <view class="drawer-footer">
                    <view class="drawer-footer-res" @click="reset">重置</view>
                    <view class="drawer-footer-sub" @click="submit">确定</view>
                </view>
            </view>
		</uni-popup>
    </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
export default {
    data() {
        return {
            current: 0,
            list1: [{
                name: '个人排名',
                type: 2
            }, {
                name: '部门排名',
                type: 1
            }],
            loading: false,
            queryData: {
                financialYear: null,
                targetType: null,
                performanceType: 2 // 1=部门 2=个人
            },
            personageData: {
                pageNum: 1,
                pageSize: 10,
                financialYear: null,
                targetType: null,
                performanceType: 2
            },
            statisticsQuery: {
                financialYear: null,
                targetType: ''
            },
            tableData: [],
            total: 0,
            // 柱状图数据
            // 每月目标
            annualTargetData: [],
            // 每月金额
            totalAmountData: [],
            yList: [],
            yearTotal: {},
            selectedYear: new Date().getFullYear(), // 初始化为当前年份
            bs_performance_targettype: []
        }
    },
    created() {

        this.bs_performance_targettype = JSON.parse(uni.getStorageSync('bs_performance_targettype'))
        // this.queryData.targetType = this.bs_performance_targettype[0].dictValue
        // this.personageData.targetType = this.bs_performance_targettype[0].dictValue
        this.statisticsQuery.targetType = this.bs_performance_targettype[0].dictValue

        const currentYear = new Date().getFullYear();
        this.statisticsQuery.financialYear = currentYear
        // this.queryData.financialYear = currentYear
        // this.personageData.financialYear = currentYear

        this.getTotalMoney()
        this.getPersonage()
    },
    methods: {
        clickTabs(item) {
            this.queryData.performanceType = item.type
            this.personageData.performanceType = item.type
            // console.log(item)
            this.getTotalMoney()
            this.getPersonage()
        },
        getTotalMoney() {
            Object.keys(this.statisticsQuery).forEach(key => {
				if (this.queryData.hasOwnProperty(key)) {
					this.queryData[key] = this.statisticsQuery[key];
				}
			});
            this.$http.get('/app/statistics/performance/yearList', this.queryData).then(res => {
                if (res.code == 200) {
                    this.yearTotal = res.data
                }
            })
        },
        getPersonage() {
            Object.keys(this.statisticsQuery).forEach(key => {
				if (this.personageData.hasOwnProperty(key)) {
					this.personageData[key] = this.statisticsQuery[key];
				}
			});
            this.$http.get('/app/statistics/performance/personageList', this.personageData).then(res => {
                if (res.code == 200) {
                    this.tableData = res.rows
                    this.total = res.total
                    this.yList = []
                    this.totalAmountData = []
                    this.annualTargetData = []
                    res.rows.forEach(item => {
                        if (this.personageData.performanceType == 2) {
                            // 个人
                            this.yList.push(item.userName)
                        } else if (this.personageData.performanceType == 1) {
                            // 部门
                            this.yList.push(item.deptName)
                        }
                        this.annualTargetData.push(item.annualTarget)
                        this.totalAmountData.push(item.totalAmount)
                    });
                    this.initChartColumnar()
                }
            })
        },
        changePageHandle(e) {
            this.personageData.pageNum = e.current
            this.getPersonage()
        },
        initChartColumnar() {
            this.$refs.chartColumnar.init(echarts, chart => {
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // legend: {
                    //     show: false,
                    //     data: ['每月目标', '每月金额']
                    // },
                    grid: {
                        top: 'top',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                    },
                    yAxis: {
                        type: 'category',
                        data: this.yList
                    },
                    series: [{
                        name: '每月目标',
                        type: 'bar',
                        barWidth: '14',
                        data: this.annualTargetData
                    },
                    {
                        name: '每月金额',
                        type: 'bar',
                        barWidth: '14',
                        data: this.totalAmountData
                    }
                    ]
                }
                chart.setOption(option);

            });
        },
               // 关闭日历
               closeCalendar() { },
        changeTime(type) {
			this.statisticsQuery.targetType = type
		},
        bindDateChange(e) {
            console.log(e)
            const selectedYearValue = new Date(e.detail.value).getFullYear();
            this.statisticsQuery.financialYear = e.detail.value;
            console.log(this.statisticsQuery.financialYear);
        },
        reset() {
            this.statisticsQuery = {
                financialYear:  new Date().getFullYear(),
                targetType: this.bs_performance_targettype[0].dictValue
			}
        },
        submit() {
            this.getTotalMoney()
            this.getPersonage()
            this.$refs.popup.close()
        },
        openHandle() {
            Object.keys(this.queryData).forEach(key => {
				if (this.statisticsQuery.hasOwnProperty(key)) {
					this.statisticsQuery[key] = this.queryData[key];
				}
			});
            this.$refs.popup.open()
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.performance {
    .input-view {
        width: 100%;

        /deep/.u-tabs__wrapper__nav__item {
            flex: 1;
        }

        /deep/.u-tabs__wrapper__nav__line {
            background: rgba(77, 172, 177, 1) !important;
        }
    }

    .title {
        padding: 16px;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }

    .money-summary {
        display: flex;
        justify-content: space-around;
        background: rgba(255, 255, 255, 1);
        margin: 32rpx 0;
        padding: 32rpx 0;

        >view {
            text-align: center;

            .label {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 14rpx;
            }

            .num {
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }
        }
    }

    .pagination {
        display: flex;
        justify-content: center;
        padding: 20rpx 0;

        .pagination-box {
            width: 190px;
        }
    }
    .drawer-box {
        width: 622rpx;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: white;

        .drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 24rpx;

            .drawer-classify {
                display: flex;
                flex-wrap: wrap;

                >view {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(103, 117, 133, 1);
                    border-radius: 16rpx;
                    background: #FFFFFFFF;
                    border: 2rpx solid #67758566;
                    padding: 16rpx 0;
                    width: 174rpx;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    text-align: center;
                }

                :nth-child(3n) {
                    margin-right: 0;
                }

                .active {
                    border: none;
                    background: #4DACB1FF;
                    color: rgba(255, 255, 255, 1);
                }
            }
            .search-item-box {
                /deep/.u-form-item__body__right {
                    border: 2rpx solid rgba(103, 117, 133, 0.4);
                    padding: 16rpx 16rpx;
                    border-radius: 8rpx;
                }
            }
        }

        .drawer-footer {
            padding: 24rpx;
            display: flex;

            >view {
                border-radius: 8rpx;
                text-align: center;
                height: 44px;
                line-height: 44px;
                font-size: 32rpx;
                font-weight: 500;
            }

            .drawer-footer-res {
                height: 42px;
                width: 154rpx;
                background: #FFFFFFFF;
                border: 3rpx solid #4DACB1FF;
                color: rgba(77, 172, 177, 1);
                margin-right: 20rpx;
            }

            .drawer-footer-sub {
                flex: 1;
                background: #4DACB1FF;
                color: #FFFFFFFF;
            }
        }
    }
}
</style>